<template>
  <el-row :gutter="40">
    <el-col :span="13" :offset="3" class="card">
      <el-card shadow="hover">
        <el-link :underline="false" href>
          <strong>{{title}}</strong>
        </el-link>
        <div class="discription">
          <el-row :gutter="20">
            <el-col :span="8">
              <div>
                <img :src="src"  class="image" />
              </div>
            </el-col>
            <el-col :span="16">
              <div>{{discription}}</div>
            </el-col>
          </el-row>
        </div>
        <div>
          <el-tag size="mini" class="tag-item" type="warning">标签一</el-tag>
          <el-tag size="mini" class="tag-item" type="warning">标签二</el-tag>
          <el-tag size="mini" class="tag-item" type="warning">标签三</el-tag>
          <el-tag size="mini" class="tag-item" type="warning">标签四</el-tag>
        </div>
        <div class="icons">
          <i class="el-icon-time icon_i">
            <span>{{time}}</span>
          </i>
          <i class="el-icon-view icon_i">
            <span>{{view}}</span>
          </i>
          <el-button type="text" @click="add_like" class="like">
            <i class="el-icon-thumb">{{like}}点赞</i>
          </el-button>
          <el-button type="info" class="buts">查看更多</el-button>
        </div>
      </el-card>
      <el-card shadow="hover">
        <el-link :underline="false" href>
          <strong>{{title}}</strong>
        </el-link>
        <div class="discription">{{discription}}</div>
        <div>
          <el-tag size="mini" class="tag-item" type="warning">标签一</el-tag>
          <el-tag size="mini" class="tag-item" type="warning">标签二</el-tag>
          <el-tag size="mini" class="tag-item" type="warning">标签三</el-tag>
          <el-tag size="mini" class="tag-item" type="warning">标签四</el-tag>
        </div>
        <div class="icons">
          <i class="el-icon-time icon_i">
            <span>{{time}}</span>
          </i>
          <i class="el-icon-view icon_i">
            <span>{{view}}</span>
          </i>
          <el-button type="text" @click="add_like" class="like">
            <i class="el-icon-thumb">{{like}}点赞</i>
          </el-button>
          <el-button type="info" class="buts">查看更多</el-button>
        </div>
      </el-card>
      <el-card shadow="hover">
        <el-link :underline="false" href>
          <strong>{{title}}</strong>
        </el-link>
        <div class="discription">{{discription}}</div>
        <div>
          <el-tag size="mini" class="tag-item" type="warning">标签一</el-tag>
          <el-tag size="mini" class="tag-item" type="warning">标签二</el-tag>
          <el-tag size="mini" class="tag-item" type="warning">标签三</el-tag>
          <el-tag size="mini" class="tag-item" type="warning">标签四</el-tag>
        </div>
        <div class="icons">
          <i class="el-icon-time icon_i">
            <span>{{time}}</span>
          </i>
          <i class="el-icon-view icon_i">
            <span>{{view}}</span>
          </i>
          <el-button type="text" @click="add_like" class="like">
            <i class="el-icon-thumb">{{like}}点赞</i>
          </el-button>
          <el-button type="info" class="buts">查看更多</el-button>
        </div>
      </el-card>
      <el-card shadow="hover">
        <el-link :underline="false" href>
          <strong>{{title}}</strong>
        </el-link>
        <div class="discription">{{discription}}</div>
        <div>
          <el-tag size="mini" class="tag-item" type="warning">标签一</el-tag>
          <el-tag size="mini" class="tag-item" type="warning">标签二</el-tag>
          <el-tag size="mini" class="tag-item" type="warning">标签三</el-tag>
          <el-tag size="mini" class="tag-item" type="warning">标签四</el-tag>
        </div>
        <div class="icons">
          <i class="el-icon-time icon_i">
            <span>{{time}}</span>
          </i>
          <i class="el-icon-view icon_i">
            <span>{{view}}</span>
          </i>
          <el-button type="text" @click="add_like" class="like">
            <i class="el-icon-thumb">{{like}}点赞</i>
          </el-button>
          <el-button type="info" class="buts">查看更多</el-button>
        </div>
      </el-card>
      <el-pagination background layout="prev, pager, next" :total="total"></el-pagination>
    </el-col>
    <el-col :span="6">
      <tag></tag>
      <friend style="padding-top:10%"></friend>
    </el-col>
  </el-row>
</template>

<script>
import friend from "../pages/commom/friend";
import tag from "../pages/commom/tag";
export default {
  name: "home",
  components: {
    friend,
    tag
  },
  data() {
    return {
      title: "标题",
      discription:
        "文章描述，例如此文章是何类型，何内容 文章描述，例如此文章是何类型，何内容 文章描述，例如此文章是何类型，何内容" +
        "文章描述，例如此文章是何类型，何内容 文章描述，例如此文章是何类型，何内容 文章描述，例如此文章是何类型，何内容" +
        "文章描述，例如此文章是何类型，何内容 文章描述，例如此文章是何类型，何内容 文章描述，例如此文章是何类型，何内容",
      time: "2019-11-30",
      view: "121234",
      like: "2397",
      total: 100,
      id: 100,
      value: new Date(),
      src: "/static/image/45677052.jpg"
    };
  },
  methods: {
    add_like() {
      this.$notify({
        title: "点赞成功",
        message: "已获得" + ++this.$data.like + "个赞",
        type: "success",
        position: "top-right",
        uration: 1000
      });
    },
    buts() {}
  }
};
</script>

<style scoped>

.card .el-card {
  margin-bottom: 20px;
  border-radius: 2px;
  border: 2px;
}
.card .el-link {
  padding-left: 10px;
  font: 18px large;
  margin-bottom: 20px;
}
.card .el-link :hover {
  padding-left: 5px;
  color: green;
}
.discription {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  color: #aaa;
  margin-bottom: 20px;
  font: 20px;
}
.icons {
  display: flex;
  align-items: center;
  font: 16px Medium;
  padding-right: 10px;
}
.icon_i {
  margin: 0 10px;
}
.like {
  color: black;
  margin-left: 10px;
}
.like :hover {
  color: rgb(13, 145, 253);
}

.buts {
  margin-left: auto;
}
.tag-item {
  margin-right: 10px;
}
.image {
  height: 160px;
  border-radius: 4px;
  width: 100%;
  object-fit: cover;
}

</style>
